{% extends 'layout/manage.html' %}
{% load dashboard %}
{% load issues %}
{% block title %}{% endblock %}

{% block css %}
    <style>

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 17px;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .table-right > tbody > tr > td.label-left {
            width: 90px;
        }

        .table-right > tbody > tr > td {
            border: 0;
        }

        .status-count {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .status-count .count {
            font-size: 25px;
        }

        .status-count a {
            text-decoration: none;
        }

        .user-item .title {
            margin-bottom: 20px;
        }

        .user-item .avatar, .top-10 .avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .user-item .text {
            line-height: 30px;
        }

        .top-10 .avatar {
            margin-right: 0;
        }

        .top-10 td {
            padding: 5px 10px;
        }

        .top-10 .table > tbody > tr > td {
            border-top: 0;
            border-bottom: 1px solid #ddd;
        }
    </style>

{% endblock %}

{% block content %}
    <div class="container-fluid" style="margin-top: 20px">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-history" aria-hidden="true"></i>
                        收藏 {{ coll_size }} 条

                    </div>
                    <div class="panel-body top-10">
                        <table class="table"
                               style="word-wrap:break-word;word-break:break-all;height:auto;min-height: 100vh;display: block;overflow-y: scroll;">
                            <tbody>
                            {#                            <span class="label label-default"> Label</span>#}
                            {#                            <span class="label label-default label-success"> Label</span>#}
                            {#                            <span class="label label-default label-danger"> Label</span>#}
                            {#                            <span class="label label-default label-primary"> Label</span>#}
                            {% for key,item in collects.items %}


                                {#                                                                {{ key }}#}
                                {#                                {{ item }}#}
                                <tr>

                                    <td class="col-md-4">
                                            <label class="label label-default label-primary"
                                                   for="">project: <label>{{ item.project }}</label></label>


                                        {% if item.avatar %}
                                            {#                                            <img class="avatar" src="{{ item.avatar }}" alt="">#}
                                        {% else %}
                                            {#                                            <div class="avatar">{{ item.creator.0|upper }}</div>#}
                                        {% endif %}
                                    </td>
                                <td class="col-md-2">
                                     <label class="label label-default label-primary"
                                                   for="">type: <label>{{ item.type }}</label></label>

                                </td>
                                    <td class="col-md-6">
                                        <label
                                                style="color: green">
                                            <a href="{{ item.link }}"
                                               style="color:dodgerblue;text-decoration: underline dotted"
                                               target="_blank">{{ item.title }}</a>
                                        </label>
                                    </td>

                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <input id="csrf_token" value="{{ csrf_token }}" hidden="hidden"/>
{% endblock %}

{% block js %}
    <script type="text/javascript">

    </script>
{% endblock %}